<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的响应式网站</title>
    <style>
        body { padding-top: 70px;}
        td   {border: 1px solid;
            border-color: #5bc0de;
        }
    </style>
<!--    <link rel="stylesheet" href="../css/bootstrap.css">-->
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

<div class="container-fluid" style="display: block;position: relative">
    <nav id="MyWeb">
        <div class="fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <a class="navbar-brand" href="#MyWeb">我的响应式网站</a>
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#lx6navBar" aria-controls="lx6navBar" aria-expanded="false" aria-label="Toggle navigation" >
                                <span class="navbar-toggler-icon"></span>
                            </button>
                    <div class="collapse navbar-collapse" id="lx6navBar">
                        <ul class="navbar-nav">
                            <li><a class="nav-link" href="#99mul">乘法口诀表</a></li>
                            <li><a class="nav-link" href="#famousScientists">科学家介绍</a></li>
                            <li><a class="nav-link" href="#contactUs">联系我们</a></li>
                        </ul>
                    </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>
</div>

<div class="container-fluid" style="display: block;position: relative">
    <h3 align="center">九九乘法表</h3>
    <div id="99mul">
        <div id="first" style="display: block">
            <script type="text/javascript">
                document.write("<table align='center'>");
                for(a=1;a<=9;a++){
                    document.write("<tr>");
                for(b=1;b<=a;b++){
                    document.write("<td>");
                    document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                    document.write("</td>");
                }
                document.write("</tr>")
                }
                document.write("</table>");
            </script>
        </div>
        <div id="second" style="display: none">
            <script type="text/javascript">
                for(let a=1;a<=9;a++){
                    document.write("<table align='center'>");
                    document.write("<tr>");
                    for(let b=1;b<=a;b++){
                        document.write("<td style='text-align: center;column-span: 4'>");
                        document.write("&nbsp"+a+"*"+b+"="+a*b+"&nbsp;&nbsp");
                        document.write("</td>");
                    }
                    document.write("</tr>");
                }
                document.write("</table>");
            </script>
        </div>
        <p/>
        <div align="center">
            <button type="button" class="btn btn-info" onclick="mySwitch()">切换</button>
            <script type="text/javascript">
                function mySwitch() {
                    if(document.getElementById("first").style.display=="block"){
                        document.getElementById("first").style.display="none"
                        document.getElementById("second").style.display="block"
                    }else {
                        document.getElementById("second").style.display="none"
                        document.getElementById("first").style.display="block"
                    }
                }
            </script>
        </div>
    </div>
</div>

<div class="container-fluid" style="display: block;position: relative">
    <div id="famousScientists">
        <div align="center">
           <p><br> <h3>科学家介绍</h3></p>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>特斯拉</h1></a>
                        <img src="../images/tsl.jpg" alt="Tsl" class="img-responsive">
                            <p>
                                尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。
                                1897年，他使马可尼的无线电通信理论成为现实。
                                1898年，他制造出世界上第一艘无线电遥控船，无线电遥控技术取得专利。
                                1899年，他发明了X光（X-Ray）摄影技术。
                            </p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>牛顿</h1></a>
                        <img src="../images/newton.PNG" alt="Newton" class="img-responsive">
                        <p>
                            艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，
                            百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。
                            在力学上，牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律。在光学上，他发明了反射望远镜，
                            并基于对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。他还系统地表述了冷却定律，并研究了音速。
                            在经济学上，牛顿提出金本位制度。他通过论证开普勒行星运动定律与他的引力理论间的一致性，
                            展示了地面物体与天体的运动都遵循着相同的自然定律；为太阳中心说提供了强有力的理论支持，并推动了科学革命。
                            在数学上，证明了广义二项式定理，提出了“牛顿法”以趋近函数的零点，
                            并为幂级数的研究做出了贡献。
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-1"></div>
            <div class="col-md-1"></div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>莱布尼茨</h1></a>
                        <img src="../images/lbnc.jpg" alt="Lbnc" class="img-responsive">
                        <p>
                            戈特弗里德·威廉·莱布尼茨（Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），
                            德国哲学家、数学家，历史上少见的通才，被誉为十七世纪的亚里士多德。
                            莱布尼茨在数学史和哲学史上都占有重要地位。在数学上，他和艾萨克·牛顿先后独立发现了微积分，
                            而且他所使用的微积分的数学符号被更广泛的使用，莱布尼茨所发明的符号被普遍认为更综合，适用范围更加广泛。<br>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 col-xs-12">
                <div class="card">
                    <div class="card-body" align="center">
                        <a><h1>爱迪生</h1></a>
                        <img src="../images/ads.jpg" alt="ads" class="img-responsive">
                        <p>
                            托马斯·阿尔瓦·爱迪生（Thomas Alva Edison，1847年2月11日—1931年10月18日），
                            出生于美国俄亥俄州米兰镇，逝世于美国新泽西州西奥兰治。世界著名的发明家、物理学家、企业家，
                            拥有众多知名重要的发明专利超过2000项。包括对世界极大影响的留声机、电影摄影机、钨丝灯泡等。
                            被传媒授予“门洛帕克的奇才”称号!美国《生活》杂志评选出千年来全球最有贡献的一百位人物，
                            发明电灯的美国发明家爱迪生名列榜首。
                            爱迪生被美国的权威期刊《大西洋月刊》评为影响美国的100位人物第9名。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="contactUs">
    <p/><br/>
    <div align="center">
        <h3 style="color: #f0ad4e">联系我们</h3>
    </div>
    <form onsubmit="return saveInfo()">
        <div class="form-row">
            <div class="col-md-1"></div>
            <div class="col-md-10 text-center  form-group">
                <label for="validationCustom01">消息:</label>
                <textarea  maxlength="6000" rows="7" class="form-control" id="validationCustom01" placeholder="您有什么好的建议或想法......" required></textarea>
            </div>
        </div>
        <div class="form-row text-center form-group">
            <div class="col-md-1"></div>
            <div class="col-md-5">
                <label for="validationCustom02">名字:</label>
                <input type="text" class="form-control" id="validationCustom02" placeholder="张三" required>
            </div>
            <div class="col-md-5">
                <label for="validationCustom03">邮箱:</label>
                <input type="text" class="form-control" id="validationCustom03" placeholder="123456@163.com" required>
            </div>
            <div class="col-md-1"></div>
        </div>
        <br/>
        <div align="center">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
        <p/><br/>
    </form>
    <script type="text/javascript">
        function saveInfo() {
            alert("已成功提交");
        }
    </script>
</div>

<script src="../js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>